<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery属性选择器</title>
		<script src="js/jquery-1.12.4.js" type="text/javascript">

		</script>
		<style type="text/css">
			div {
				background-color: #f00;
				margin: 5px;
				border: 2px solid #000000;
			}
		</style>
	</head>
	<body>
		<div id='div1' class="cls1" a='v1'>1----
			<div b='v1'>1.2-----</div>
		</div>
		<div a='v2'>2----</div>
		<div a='v1'>3----</div>
		<div a='v2' b='w1'>4----</div>
		<div a='v1'>5----</div>
		<div a='v12'>6----</div>
		<div a='v31' b='w2'>7----</div>
		<div b='w1'>8----</div>
		<div b='w2'>9----</div>
		<div b='w31'>10----</div>

		<script type="text/javascript">
			$(function() {
				// 1. 选择有a属性的div属性,不管值是多少
				// $('div[a]').css('background-color','#0ff');
				// 			将id当作属性 -----> 使用#速度快点
				// $('#div1').css('background-color','#0ff');
				// 			属性
				// $('div[id=div1]').css('background-color','#0ff');

				// 2.[attribute = value] ：拥有属性，并且属性值等于value
				// $('div[a=v1]').css('background-color','#0ff');
				// $('div[a=v2]').css('background-color','#0f0');

				// 3.[attribute != value] : 拥有属性但值不等于value，或者冇属性
				// $('div[a!=v1]').css('background-color','#0ff');
				// 至少要有这个属性
				// $('div[a][a!=v1]').css('background-color','#0ff');

				// 4.[attribute ^= value] : 拥有属性值以value开头
				// $('div[a^=v]').css('background-color','#0ff');

				// 5.[attribute $= value] : 拥有属性值以value结尾
				// $('div[a$=1]').css('background-color','#0ff');

				// 6.[attribute *= value] ：属性值包含value
				// $('div[a*=v]').css('background-color','#0ff');

				// 7.[attribute] [attribute] : 同时拥有多个属性值  
				// ！并列中间不能有空格 ------>> (空格是层级选择器)
				// $('div[a][b]').css('background-color', '#0ff');
				
				// 有a属性但是没有b属性
				// $('div[a]:not([b])').css('background-color','#0ff');
				
				// 有a属性,但是属性值不等于v1
				// $('div[a][a!=v1]').css('background-color','#0ff');
				// $('div[a]:not([a=v1])').css('background-color','#0ff');
				
				// 有a属性,但是不能以1结尾
				// $('div[a]:not([a$=1])').css('background-color','#0ff');
				
				// a, b, 有且至于其中一个属性 ==> 有a没有b,或有b没有a
				$('div[a]:not([b]),div[b]:not([a])').css('background-color','#0ff');
				


			});
		</script>
	</body>
</html>
